<template>
  <div class="w-full max-w-5xl mx-auto select-none">
    <div
      class="relative"
      @mouseenter="pauseAutoplay"
      @mouseleave="resumeAutoplay"
    >
      <!-- Slide -->
      <div class="overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-slate-800 to-slate-900 shadow-2xl">
        <transition name="fade" mode="out-in">
          <div
            class="p-10 md:p-12 min-h-[260px] flex flex-col items-center justify-center text-center"
            :key="activeItem?.id ?? currentIndex"
          >
            <div class="mb-4 inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 text-xs text-slate-300 border border-white/10">
              <span>电影</span>
              <span v-if="activeItem?.year" class="opacity-70">· {{ activeItem?.year }}</span>
              <span class="opacity-70">· 评分 {{ (activeItem?.average_rating ?? 0).toFixed(1) }}</span>
            </div>

            <h3 class="text-2xl md:text-3xl font-bold tracking-tight mb-3 text-white">
              {{ activeItem?.title }}
            </h3>
            <p class="text-sm md:text-base text-slate-300/90 max-w-2xl">
              精选影片，基于用户口碑与数据综合推荐，点击卡片可前往详情页了解更多。
            </p>

            
          </div>
        </transition>
      </div>

      <!-- Controls -->
      <button
        class="absolute left-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-black/40 hover:bg-black/60 text-white backdrop-blur border border-white/10"
        @click="prev"
        aria-label="上一张"
      >
        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
      </button>
      <button
        class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-black/40 hover:bg-black/60 text-white backdrop-blur border border-white/10"
        @click="next"
        aria-label="下一张"
      >
        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
      </button>

      <!-- Indicators -->
      <div class="flex items-center justify-center gap-2 mt-5">
        <button
          v-for="(it, i) in items"
          :key="it.id ?? i"
          class="h-2 rounded-full transition-all"
          :class="i === currentIndex ? 'w-6 bg-white' : 'w-2 bg-white/40 hover:bg-white/60'"
          @click="go(i)"
          aria-label="跳转到第 {{ i + 1 }} 张"
        />
      </div>
    </div>
  </div>
  
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import type { Movie } from '@/types'

const props = defineProps<{
  items: Movie[]
  autoplay?: boolean
  interval?: number
}>()

const currentIndex = ref(0)
const timerId = ref<number | null>(null)

const activeItem = computed(() => props.items?.[currentIndex.value])

function next() {
  if (!props.items?.length) return
  currentIndex.value = (currentIndex.value + 1) % props.items.length
}

function prev() {
  if (!props.items?.length) return
  currentIndex.value = (currentIndex.value - 1 + props.items.length) % props.items.length
}

function go(i: number) {
  if (!props.items?.length) return
  currentIndex.value = Math.max(0, Math.min(i, props.items.length - 1))
}

function startAutoplay() {
  if (props.autoplay === false) return
  stopAutoplay()
  timerId.value = window.setInterval(() => {
    next()
  }, props.interval ?? 3500)
}

function stopAutoplay() {
  if (timerId.value != null) {
    clearInterval(timerId.value)
    timerId.value = null
  }
}

function pauseAutoplay() {
  stopAutoplay()
}

function resumeAutoplay() {
  startAutoplay()
}

onMounted(() => {
  startAutoplay()
})

onBeforeUnmount(() => {
  stopAutoplay()
})

watch(
  () => props.items,
  () => {
    currentIndex.value = 0
    startAutoplay()
  }
)
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity .3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

